<template>
  <div class="weather-date">
    <div class="weather">
      <img class="weather-img" :src="weatherData.weaImg" alt="" />
      <div>
        <p class="weather-tem">{{ weatherData.tem }}</p>
        <p class="weather-wea">{{ weatherData.wea }}</p>
      </div>
    </div>
    <span class="date-time">{{ dateTime }}</span>
    <div class="date">
      <div>
        <p class="date-week">星期{{ dateWeek }}</p>
        <p class="date-ymd mt-10">{{ dateYMD }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onBeforeUnmount } from 'vue'
import { getWeather } from '@/api/weather'
import dayjs from 'dayjs'
export default defineComponent({
  setup () {
    // data
    const params = {
      appid: '77993245',
      appsecret: 'HtnE33t1',
      version: 'v1',
      city: '东阳'
    }
    const weatherData = ref({
      weaImg: require('@/assets/weather/qing.png'),
      wea: '晴',
      tem: '20℃'
    })
    const dateWeekCN = ['日', '一', '二', '三', '四', '五', '六']
    const dateYMD = ref('')
    const dateTime = ref('')
    const dateWeek = ref('')

    // mehtods, lifecycle
    const getWeatherData = () => {
      getWeather(params).then((res: any) => {
        weatherData.value = {
          weaImg: require(`@/assets/weather/${res.wea_img}.png`),
          wea: res.wea,
          tem: res.tem + '℃'
        }
      })
    }
    // 先查询一次天气
    getWeatherData()
    const getDate = () => {
      dateYMD.value = dayjs().format('YYYY.MM.DD')
      dateTime.value = dayjs().format('HH:mm:ss')
      dateWeek.value = dateWeekCN[dayjs().day()]
    }
    // 先查询一次时间
    getDate()

    // timer, lifecycle
    // 半小时查询一次天气
    const weatherTimer = setInterval(() => {
      getWeatherData()
    }, 1000 * 60 * 30)
    // 每秒查询时间
    const dateTimer = setInterval(() => {
      getDate()
    }, 1000)
    onBeforeUnmount(() => {
      clearInterval(dateTimer)
      clearInterval(weatherTimer)
    })

    return {
      weatherData,
      dateYMD,
      dateTime,
      dateWeek
    }
  }
})
</script>

<style lang="scss" scoped>
.weather-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 6.5rem;
  padding: .03rem;
  top: .13rem;
  right: .3rem;
}
.weather {
  display: flex;
  align-items: center;

  .weather-img {
    display: inline-block;
    width: .78rem;
    height: .71rem;
    margin-right: .06rem;
  }
  .weather-tem {
    font-family: FontName;
    font-size: .28rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: .28rem;
    letter-spacing: 0rem;
    color: #ffffff;
  }
  .weather-wea {
    font-family: PangMenZhengDao;
    font-size: .28rem;
    font-weight: normal;
    font-stretch: normal;
    line-height: .28rem;
    letter-spacing: 0rem;
    color: #ffffff;
  }
}

.date-time {
  font-family: PangMenZhengDao;
  font-size: .64rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: .71rem;
  letter-spacing: 0rem;
  color: #ffffff;
}
.date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: .6rem;
  font-family: PangMenZhengDao;
  font-size: .29rem;
  font-weight: normal;
  font-stretch: normal;
  line-height: .27rem;
  letter-spacing: 0rem;
  color: #ffffff;
}
</style>
